<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/goodsdetails.css"/>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
</head>
<body>
    <div class="container" id="returnindex">
        <div class="row">
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="goodsmanage"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="ordermanage"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"><a href="index.html">返回首页</a></div>
        </div>
    </div>
    <div class="container" id="pagetitle">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><p id="titlep"><span>乐享生活</span>&nbsp;商品详情</p></div>
        </div>
    </div>

    <div class="container" id="title">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" id="titleten">
                <div id="bordertop">商品详情</div>
            </div>
        </div>
    </div>

    <div class="container" id="goodsdetails">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" id="goodsdetailsten">
            </div>
        </div>
    </div>

    <script type="text/javascript">

        var goodsid = location.search.split("=")[1];

        var userId = $.cookie("userId");

        $.get("goods/getById",{goodsid:goodsid},function (data) {

            data = JSON.parse(data);

            var ht = ' <div class="row">\n' +
                '                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>\n' +
                '                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">\n' +
                '                        <img src="/FVOnline/goods/getImg?goodsId='+ data.id +'">\n' +
                '                    </div>\n' +
                '                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">\n' +
                '                        <p id="name">'+ data.goodsname +'&nbsp;&nbsp;&nbsp;&nbsp;'+ data.details +'</p>\n' +
                '                        <p class="buyp">本店价格 ：<span>￥'+ data.price +'</span></p>\n' +
                '                        <p class="buyp">商品类型 ：<span>'+ data.type +'</span></p>\n' +
                '                        <p class="buyp">累计销量 ：<span>'+ data.sellnum +'</span></p>\n' +
                '                        <p class="buyp">库存 ：<span>'+ data.number +'</span></p>\n' +
                '                        <div id="numdiv"><button id="jian">-</button><input type="text" id="buynum" value="1"><button id="add">+</button></div>\n' +
                '                        <button id="buy">立即购买</button><button id="addche">加入购物车</button>\n' +
                '                    </div>\n' +
                '                </div>';

            ht += '<div class="row" id="sumevaluate">累计评论</div>';

            var evals= '';

            for (var i = 0; i < data.evaluates.length && i< 5; i++) {
                evals += '<div class="evaluate">'+ data.evaluates[i].evaluate +'</div>\n' +
                    '  <div class="name">匿名</div>\n' +
                    '  <div class="time">'+ data.evaluates[i].time +'</div>';
            }

            ht += '<div class="row" id="valuates">'+ evals +'</div>';

            var page = 1;

            ht += '<div id="pageinfo"><button id="next">加载更多</button></div>';


            $("#goodsdetailsten").html(ht);


            $("#next").click(function () {
                var end = (parseInt(page) + 1)*5;
                var start = (parseInt(page)) * 5;

                var h = $("#valuates").html();
                var a = '';


                for (var i = start; i < data.evaluates.length && i < end; i++) {
                    a += '<div class="evaluate">'+ data.evaluates[i].evaluate +'</div>\n' +
                        '  <div class="name">匿名</div>\n' +
                        '  <div class="time">'+ data.evaluates[i].time +'</div>';
                }

                $("#valuates").html("");
                $("#valuates").html(h+a);

                var info = '共'+ Math.ceil(data.evaluates.length/5) +'页，当前为第'+ (parseInt(page) + 1) +'页';

                page = (parseInt(page) + 1);
            });


            $("#jian").click(function () {
                if ($("#buynum").val() > 1){
                    $("#buynum").val(parseInt($("#buynum").val()) - 1);
                }
            });

            $("#add").click(function () {
                if ($("#buynum").val() < data.number){
                    $("#buynum").val(parseInt($("#buynum").val()) + 1);
                }
            });

            $("#buy").click(function () {

                var num = $("#buynum").val();

                if (num != null && num.length > 0){
                    location.href = "buygoods.html?goodsid=" + goodsid +"&num=" + num;
                }
            });


            $("#addche").click(function () {

                var num = $("#buynum").val();

                $.post("che/addChe",{userId:userId,goodsid:goodsid,num:num},function (data) {
                    data = JSON.parse(data);

                    if (data.code.toLowerCase() == "success"){
                        alert("添加购物车成功，商品在购车中等您哦")
                    }else {
                        alert("添加购物车失败,请稍后再试");
                    }
                });
            });

        });

    </script>
</body>
</html>